<template>
  <div class="home">
    <div class="banner">
      <div class="bgc"></div>
      <div class="content flex flex_column flex_center">
        <h1 class="title fontsize_64">{{ title }}</h1>
        <h2 class="sub-title fontsize_32">{{ subTitle }}</h2>
        <div>
          <NewTime />
        </div>
      </div>
    </div>
    <div class="body-box flex flex_column align_center">
      <template v-for="(item, index) in list">
        <Card
          class="mb_20"
          :key="index"
          :img="item.img"
          :title="item.title"
          :content="item.content"
          :author="item.author"
          :time="item.time"
          :comments="item.comments"
          :praise="item.praise"
          :extends="item"
          width="80%"
          height="320px"
          :link="item.link"
        />
      </template>
      <Pagination :page="page" :pageSize="pageSize" :total="total" @change="onChange"/>
    </div>
    <Footer />
  </div>
</template>

<script>
import Card from "../components/card.vue";
import Footer from "../layout/components/footer.vue";
import NewTime from "../components/newTime.vue";
import Pagination from "../components/pagination.vue";
export default {
  name: "Article",
  components: { Card, Footer, NewTime, Pagination },
  data() {
    return {
      title: "文章",
      subTitle: "来看看我的文章吧，相信你会喜欢的",
      sourse: require("../api/article.js"),
      list:[],
      total:0,
      page:1,
      pageSize:2,
    };
  },
  created() {
    this.onGetList();
  },
  methods: {
    onChange(page) {
      this.onGetList(page);
    },
    onGetList(page=this.page, pageSize=this.pageSize) {
      this.list = this.U.splitList(this.sourse, pageSize, page);
      this.page = page;
      this.pageSize = pageSize;
      this.total = this.sourse.length;
    }
  },
};
</script>
<style  lang='scss' scoped>
.home {
  width: 100%;
  height: 100%;
  background-color: #fff;
  overflow-x: hidden;
  overflow-y: auto;
  .banner {
    $banner-height: 80vh;
    width: 100%;
    height: $banner-height;
    position: relative;
    .bgc {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: $banner-height;
      background-color: #f8f8f8;
      background-image: url(../assets/images/guide.jpg);
      background-size: cover;
      // background-size: 100%;
      // background-repeat: no-repeat;
      // background-position: center;
    }
    .content {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: $banner-height;
      background-color: rgba(0, 0, 0, 0.2);
      .title {
        color: #fff;
        margin-bottom: 1rem;
      }
      .sub-title {
        color: #fff;
      }
    }
  }
  .body-box {
    position: relative;
    z-index: 10;
    margin-top: -100px;
    padding: 20px;
  }
}
</style>
